<template>
	<view>
		<view class="top">
			<text>电表</text>
			<text>
				<text>总用量：</text>
				<text>80</text>
			</text>
		</view>
		<view class="list">
			<!-- <view class="item">
				<picker style="height: 150px;" mode="selector" :range="months" @change="onDateChange">
					<view>
						<text class="title" style="margin-right: 36px;">月份：</text>
						<input class="input" focus :value="time" />
					</view>
				</picker>
			</view> -->
			<view class="item">
				<view class="title">抄表数</view>
				<view style="width: 100%;"><input type="number" class="input" focus placeholder="请输入本次抄表数" /></view>
			</view>
			<view class="item">
				<view class="title">抄表日期：</view>
				<view @click="dateChange"><input class="input" disabled :value="date" focus placeholder="请选择日期" /></view>
			</view>
			<view class="btn">
				<button type="primary" @click="payment">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}`;
	}
	export default {
	    data () {
	        const date = new Date()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 1; i <= month; i++) {
				const date = i + '月'
				months.push(date)
			}
			const time = month + '月'
			months.reverse()
	        return {
				months,
				month,
				time,
				date: '',
	        }
	    },
	    methods: {
	        onDateChange (e) {
				const val = e.detail.value
				this.time = this.months[val];
			},
			dateChange () {
				let that = this;
				dd.datePicker({
				  format: 'yyyy-MM-dd',
				  success: (res) => {
				    that.date = res.date
				  },
				});
			},
			payment () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../meterReading-info/meterReading-info'
					});
				},10);
			}
	    }
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	view {
		font-size: 28rpx;
		line-height: inherit
	}
	.list {
		background-color: #FFFFFF;
		padding: 30rpx;
	}
	.top {
		background-color: #FFFFFF;
		margin-bottom: 1px;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		padding-right: 40rpx;
		border-bottom: 1px solid #efeff4;
	}
	
	.input {
		background-color: #efeff4;
		width: 97.5%;
		border-radius: 6rpx;
		padding: 10rpx 5rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	.item {
		margin-bottom: 30rpx;
	}
	.item .title {
		margin-bottom: 20rpx;
	}
	.btn {
		margin-top: 50rpx;
		margin-bottom: 30rpx;
	}
</style>
